<template>
  <div>
    <Form
    :disabled="readonlyData || disabled"
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="80"
    >
      <FormItem label="姓名" prop="realname">
        <Input v-model="formValidate.realname" placeholder="请输入姓名"></Input>
      </FormItem>
      <FormItem label="号码" prop="mobile">
        <Input v-model="formValidate.mobile" placeholder="请输入号码"></Input>
      </FormItem>
      <FormItem label="身份证号" prop="identity">
        <Input
          v-model="formValidate.identity"
          placeholder="请输入身份证号"
        ></Input>
      </FormItem>
      <FormItem label="认证类型" prop="type" required>
        <Select v-model="formValidate.type" placeholder="请选择认证类型">
          <Option v-for="item in typelist" :key="item.id" :value="item.id">{{
            item.title
          }}</Option>
        </Select>
      </FormItem>
      <FormItem label="认证说明" prop="content">
        <Input
          v-model="formValidate.content"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder="请输入认证说明"
        ></Input>
      </FormItem>
      <FormItem label="认证材料" prop="thumbs">
        <div v-if="formValidate.thumbs" class="imgBox">
          <div class="videoBox" v-for="item in formValidate.thumbs.split(',')" :key="item">
          <img class="videoEL" :src="item" />
          <img
            v-show="!disabled"
            src="@/assets/active/del.png"
            alt=""
            @click="handleDelImg(item)"
            class="delImg"
          />
        </div>
        </div>
        <Upload
          v-show="!disabled"
          :action="action"
          ref="upload"
          :headers="accessToken"
          accept="image/*"
          :on-format-error="handleSuccessVideoLu"
          :on-success="handleSuccess"
        >
          <div class="uploadBox">
            <img src="@/assets/active/upload.png" alt="" />
          </div>
        </Upload>
      </FormItem>
      <FormItem v-if="!readonlyData">
        <Button type="primary" @click="handleSubmit('formValidate')"
          >提交</Button
        >
        <Button @click="handleReset('formValidate')" style="margin-left: 8px"
          >取消</Button
        >
      </FormItem>
      <FormItem v-if="disabled" label="审核意见">
        {{formValidate.status === 0 ? '待审核':formValidate.status === 1?'已通过':'未通过原因：' }}   {{formValidate.remake}}
      </FormItem>

    </Form>
    <Button v-if="formValidate.status === 2 && disabled" @click="disabled = false" style="margin-left: 8px"
          >修改</Button
        >
  </div>
</template>

<script>
import { updateAuthPeople, getAuthPeople } from "@/api/set.js";
import { commonUrl } from "@/plugins/request.js";
import storage from "@/plugins/storage.js";
// JSON.parse(localStorage.userInfo).id,
export default {
  name: "approve",
  props: {},
  components: {},
  data() {
    return {
      disabled: false,
      accessToken: {}, // 验证token
      action: `${commonUrl}/common/common/upload/file`,
      formValidate: {},
      typelist: [],
      ruleValidate: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (!/^1[3456789]\d{9}$/.test(value)) {
                callback(new Error("请输入正确的电话号码"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        identity: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                !/^[1-8][1-7]\d{4}(?:19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dX]$/.test(
                  value
                )
              ) {
                callback(new Error("请输入正确的身份证号码"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        type: [
          // { required: true, message: '请选择认证类型', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择认证类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        content: [
          { required: true, message: "请输入认证说明", trigger: "blur" },
        ],
        thumbs: [
          { required: true, message: "请上传认证材料", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.accessToken.accessToken = storage.getItem("accessToken");
  },

  watch: {},
  computed: {
    readonlyData() {
        // 0 待审核 1 通过
        if(this.formValidate.status === 1 || this.formValidate.status === 0) {
          return true
        }
        // 2 未通过
        if(this.formValidate.status === 2) {
          return  true && this.disabled
        }
        return false
    }
  },
  methods: {
    handleDelImg(item) {
      const arr =  this.formValidate.thumbs.split(',')
      const index = arr.findIndex(it => it === item)
      arr.splice(index,1)
      this.formValidate.thumbs =arr.join(',')
      this.$refs.upload.clearFiles()

      this.$forceUpdate()
    },
    getData() {
      getAuthPeople({
        mid: JSON.parse(localStorage.userInfo).id,
      }).then((res) => {
        if (res.code === 1) {
          this.typelist = res.typelist;
             // 0 待审核 1 通过 2 未通过
          // remake  未通过理由
          if(res.olddate) {
            this.formValidate = res.olddate
            this.formValidate.type = parseInt(res.olddate.type)
            this.disabled = true
            this.$forceUpdate()
          }
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          updateAuthPeople({
            ...this.formValidate,
            mid: JSON.parse(localStorage.userInfo).id,
          }).then((res) => {
            if (res.code === 1) {
              this.$Message.success("提交成功，待审核中");
              this.getData()

            }
          });
          // this.$Message.success('Success!');
        } else {
          // this.$Message.error('Fail!');
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSuccessVideoLu(error, file, fileList) {
      this.$Notice.warning({
        title: "请上传正确的图片格式",
      });
    },
    handleSuccess(res, file) {
      // 上传成功
    const arr = this.formValidate.thumbs? this.formValidate.thumbs.split(','):[]
    arr.push(res.result)
    this.formValidate.thumbs = arr.join(',')
    this.$refs.upload.clearFiles()
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
.uploadBox {
  width: 104px;
  height: 104px;
  border: 1px solid #e3e2e2;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 31px;
    height: 31px;
  }
}
.imgBox {
  display: flex;
  flex-wrap: wrap; gap: 20px;
}
.videoBox {
  position: relative;
  width: 200px;
  background-color: #dedede;
  // margin-bottom: 20px;
  // margin-right: ;

  .videoEL {
    width: 100%;
  max-height: 200px;
    object-fit: scale-down;
  }
  .delImg {
    cursor: pointer;
    width: 31px;
    height: 31px;
    position: absolute;
    right: -20px;
    top: -20px;
    z-index: 1;
  }
}
</style>
